<template>
   <div class="edu-page-warp">
        	<inner-breadcrumb
			v-model="pathKey"
			:path="path"
		></inner-breadcrumb>
		<template v-if="pathKey=='main'">
        <condition-card v-if="isGraduate" @reset="reset" @search="onSubmit" :labelWidth="'100px'">
            <el-form label-width="110px" label-position="right" label-suffix="：">
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.trainingLevel')">
                            <!--   v-for="item in options.trainingLevel" -->
                            <el-select v-model="queryForm.trainingLevel" style="width: 100%;" clearable>
                                <el-option
                                    v-for="item in options.allTrainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.trainingCategory')">
                            <el-select v-model="queryForm.trainingCategoryList" style="width: 100%;" multiple collapse-tags clearable>
                                <el-option
                                    v-for="item in options.trainingCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.professionalDegreeCateGory')">
                            <el-select v-model="queryForm.majorIdList" style="width: 100%;" multiple collapse-tags clearable>
                                <el-option
                                    v-for="item in options.majorId"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                      <el-form-item :label="$t('label.college')">
                          <el-select v-model="queryForm.collegeList" style="width: 100%;" multiple collapse-tags clearable>
                              <el-option
                                  v-for="item in options.college"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                              ></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item :label="$t('professions.isValid')">
                      <el-select v-model="queryForm.status" style="width: 100%;" clearable>
                        <el-option
                          v-for="item in options.status"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                    <!--<el-col :span="8">
                        <el-form-item :label="$t('professions.isRecruit')+ '：'">
                            <el-select v-model="queryForm.isRecruit" style="width: 100%;" clearable>
                                <el-option
                                    v-for="item in options.isRecruit"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>-->
                </el-row>
            </el-form>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title" style="margin-bottom:16px">{{$t('professions.schoolProfessionalDegreesCatalogue')}}</div>
            <div class="edu-opertion-bar" v-if="isGraduate">
                <div class="float-left">
                    <el-input
                        v-model="queryForm.condition"
                        :placeholder="$t('professions.plsInputProCodeOrDomainName')"
                        style="width:260px"
                        @keyup.enter.native="onSubmit"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </div>
                <div class="float-right">
                    <el-button type="primary" @click="exportMajor">{{$t('message.export')}}</el-button>
                    <el-button v-if="this.global.isAdmin" type="primary" @click="showAddDialog">{{$t("message.add")}}</el-button>
                </div>
            </div>
            <el-table stripe :data="viewData" size="mini" width="100%" tooltip-effect="light">
              <edu-table-column :label="$t('professions.professionalCategroyCode')" prop="majorCode" />
              <edu-table-column :label="$t('professions.professionalCategroyName')" prop="majorName" />
              <edu-table-column :label="$t('nonPublicCourseOpen.majorCode')" prop="code" />
              <edu-table-column :label="$t('professions.professionalDomainName')" prop="name" />
              <edu-table-column prop="time" :label="$t('professions.authorizedYear')" />
              <edu-table-column :label="$t('professions.isDoctors')">
                <template slot-scope="props">
                  <el-tag v-if="props.row.isDoctor" type="success">{{$t('common.text.yes')}}</el-tag>
                  <el-tag v-if="!props.row.isDoctor" type="danger">{{$t('common.text.no')}}</el-tag>
                </template>
              </edu-table-column>
              <edu-table-column :label="$t('message.operating')" width="100" v-if="this.global.isAdmin">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="edit(scope.row)"
                  >{{$t("message.edit")}}</el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="deleteMajor(scope.row)"
                  >{{$t("message.delete")}}</el-button>
                </template>
              </edu-table-column>
            </el-table>
            <el-row>
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
            :title="dialogTitle"
            width="700px"
            :visible.sync="showDialog"
            @close="resetFormValidate()"
            :close-on-click-modal="false"
            v-drag-dialog
        >
            <el-form
                :model="postForm"
                label-position="right"
                label-width="110px"
                :rules="rules"
                ref="postForm"
                label-suffix="："
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.professionalDegreeName')" prop="majorId">
                            <el-select v-model="postForm.majorId" style="width: 100%;">
                                <el-option
                                    v-for="item in options.majorId"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.professionalDomainName')" prop="name">
                            <el-input v-model="postForm.name" maxlength="50" :placeholder="$t('common.pla.pleaseInput')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('nonPublicCourseOpen.majorCode')" prop="code">
                            <el-input v-model="postForm.code" maxlength="32" :placeholder="$t('common.pla.pleaseInput')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.authorizedYear')">
                            <el-date-picker
                                ref="datepicker"
                                v-model="postForm.time"
                                type="year"
                                value-format="yyyy"
                                style="width:100%"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('message.nameEn')">
                            <el-input v-model="postForm.nameEn" maxlength="50" :placeholder="$t('common.pla.pleaseInput')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('arrangement.assistDataCfg.iseffective')">
                            <el-select v-model="postForm.status" style="width: 100%;" :disabled="this.postForm.isRevoke == 1">
                                <el-option
                                    v-for="item in options.status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.revoke')">
                            <el-select v-model="postForm.isRevoke" style="width: 100%;" @change="revokeChange">
                                <el-option
                                    v-for="item in options.isRevoke"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.revokeTime')">
                            <el-date-picker
                                :disabled="revokeTimeReadOnly"
                                v-model="postForm.revokeTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="month"
                                style="width:100%"
                                :placeholder="$t('professions.plsChooseDate')"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('professions.isDoctors')">
                            <el-select v-model="postForm.isDoctor" style="width: 100%;">
                                <el-option
                                    v-for="item in options.isDoctor"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="12">
                        <el-form-item :label="$t('professions.isRecruit')">
                            <el-select v-model="postForm.isRecruit" style="width: 100%;">
                                <el-option
                                    v-for="item in options.isRecruit"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="float-right">
                            <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
                            <el-button type="primary" @click="save">{{$t("message.save")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
		</template>

        <GraduateProfessionMajorComponent
            v-show="pathKey=='graduateProfessionMajor'"
             :options="options"
            :heardTitle="heardTitle"
            @back="pathKey='main'"
            ref="graduateProfessionMajorBread"
        ></GraduateProfessionMajorComponent>
    </div>
</template>
<script>
import bus from "common/src/utils/bus";
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import {
    getAllMajorList,
    addGraduateDegree,
    getGraduateDegreePage,
    getGraduateDegreeById,
    deleteGraduateDegree,
    exportDegree
} from "common/src/api/resource/course";
import GraduateProfessionMajorComponent from './component/GraduateProfessionMajorComponent'
import mixin from 'common/src/mixins/index';

export default {
    name: "graduateProfessionMajor",
    mixins: [mixin],
    components: {
        GraduateProfessionMajorComponent
    },
    data() {
        return {
            dialogTitle:'',
               path:{
               label: this.$t('professions.schoolProfessionalDegreesCatalogue'),
               key:'main',
               children:[{
                 label: this.$t('message.edit'),
                 key:'edit',
                 disable: true,
                 children : [{
                   label:  this.$t('professions.graduateScienceMajor'),
                   key:'graduateProfessionMajor'
                    }]
                }]
            },
            pathKey: "main",
            heardTitle:"",
            queryForm: {
                trainingLevel: "",
                trainingCategory: "",
                trainingCategoryList: [],
                majorId: "",
                majorIdList: [],
                college: "",
                collegeList: [],
                isRecruit: "",
                status:'',
                condition: "",
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                type: 2
            },
            postForm: {
                majorId: "",
                name: "",
                nameEn: "",
                code: "",
                time: "",
                status: "1",
                isDoctor: "0",
                isRevoke: "0",
                isRecruit: "1",
                revokeTime: "",
                type: 2 //必填
            },
            options: {
                trainingLevel: [],
                college: [],
                allTrainingLevel: [],
                trainingCategory: [],
                studentCategory: [],
                majorId: [],
                status: [],
                isRecruit: [],
                isRevoke: [],
                isDoctor: []
            },
            rules: {
                majorId: [
                    {
                        required: true,
                        message: this.$t('professions.plsInputMajorDegreeName'),
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: this.$t('professions.plsInputProCode'),
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: this.$t('professions.plsInputMajorDomainCode'),
                        trigger: "blur"
                    }
                ]
            },
            collegeRules: {
                trainingLevel: [
                    {
                        required: true,
                        message: this.$t("course.selectTrainingLevel"),
                        trigger: "blur"
                    }
                ],
                trainingCategory: [
                    {
                        required: true,
                        message: this.$t("professions.plsChooseTrainCategory"),
                        trigger: "blur"
                    }
                ]
            },
            viewData: [],
            showDialog: false,
            collegeRelation: [],
            isGraduate: false
        };
    },
    mounted: function() {
        let user =
            this.$store.state.session.user ||
            JSON.parse(localStorage.getItem("user"));
        if (user && user.currentManageDptId) {
            this.isGraduate = user.currentManageDptId != "1";
        }
        this.init();
    },
    watch: {
        postForm: {
            handler(curVal, oldVal) {
                if ("0" == curVal.isRevoke) {
                    this.revokeTimeReadOnly = true;
                    this.postForm.revokeTime = "";
                } else if ("1" == curVal.isRevoke) {
                    this.revokeTimeReadOnly = false;
                }
            },
            deep: true
        },
         pathKey(val) {
			if (val == "main") {
				this.onSubmit();
            }
        }
    },
    methods: {
        init() {
            let yes = { label: this.$t("message.yes"), value: "1" };
            let no = { label: this.$t("message.no"), value: "0" };
            this.options.status.push(yes);
            this.options.status.push(no);
            this.options.isDoctor.push(yes);
            this.options.isRecruit.push(yes);
            this.options.isRecruit.push(no);
            this.options.isRevoke.push(yes);
            this.options.isRevoke.push(no);
            this.options.isDoctor.push(no);
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX", "X_PYLB", "X_XWLX"]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            allTrainingLevel: "X_PYCC",
                            college: "X_YX",
                            trainingCategory: "X_PYLB",
                            studentCategory: "X_XWLX"
                        },
                        res.data,
                        this.options
                    );
                }
            });
            getAllMajorList({
                level: 1,
                type: 2,
                page: false
            }).then(res => {
                if (res.code == 200) {
                    this.options.majorId = res.data.list.map(c => {
                        return {
                            label: c.name,
                            value: c.id
                        };
                    });
                }
            });
            this.onSubmit();
        },

        onSubmit() {
            if (this.isGraduate) {
                this.getDataList();
            } else {
                this.viewData = [];
                this.queryForm.total_ = 0;
            }
        },
        reset() {
            this.queryForm.trainingLevel = "";
            this.queryForm.trainingCategory = "";
            this.queryForm.trainingCategoryList = [];
            this.queryForm.majorId = "";
            this.queryForm.majorIdList = [];
            this.queryForm.college = "";
            this.queryForm.collegeList = [];
            this.queryForm.isRecruit = "";
            this.queryForm.condition = "";
            this.onSubmit()
        },
        getDataList(isFirstPage = true) {
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            getGraduateDegreePage(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.viewData = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getDataList();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getDataList(false);
        },
        revokeChange(val){
            if("1" == val){
                this.postForm.status = '0';
            }
        },
        edit(row) {
            this.pathKey = "graduateProfessionMajor";
            this.heardTitle = this.$t("common.btn.edit");
            this.$refs['graduateProfessionMajorBread'].edit(row);
        },
        deleteMajor(row) {
            // this.$confirm(
            //     this.$t("message.deleteConfirm"),
            //     this.$t("message.prompt"),
            //     {
            //         confirmButtonText: this.$t("message.confirm"),
            //         cancelButtonText: this.$t("message.cancel"),
            //         type: "warning"
            //     }
            this.$delConfirm().then(() => {
                deleteGraduateDegree({ ids: [row.id] }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("message.deleteSuccess")
                        });
                        this.getDataList();
                    }
                });
            });
        },
        save() {
            this.$refs.postForm.validate(valid => {
                if (!valid) {
                    return;
                }
                let fn = res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("message.saveSuccess")
                        });
                        this.onSubmit();
                        this.showDialog = false;
                    }
                };
                    addGraduateDegree(this.postForm).then(fn);
            });
        },
        cancel() {
            this.showDialog = false;
            this.dialogTitle = '';
        },
        showAddDialog() {
            this.dialogTitle = this.$t('common.btn.add');
            this.showDialog = true;
        },
        resetFormValidate() {
            this.$refs.postForm.clearValidate();
            this.postForm.majorId = "";
            this.postForm.name = "";
            this.postForm.nameEn = "";
            this.postForm.time = "";
            this.postForm.code = "";
            this.postForm.isDoctor = "0";
            this.postForm.status = "1";
            this.postForm.isRevoke = "0";
            this.postForm.isRecruit = "1";
            this.postForm.revokeTime = "";
            this.collegeRelation.length = 0;
        },
        exportMajor() {
            exportDegree(this.queryForm);
        }
    }
};
</script>
<style lang="scss" scoped>
</style>
